<template>
	<view>
		<view class="g-goBack" @click="$utils.toBack()">
			<view class="cuIcon-back"></view>
		</view>
		<view class="page-head">用户提现申请</view>
		<!-- 订单详情 -->
		<view class="orderDetail">
			<view class="info">
				<view class="line">订单编号：{{data.tradeNo}}</view>
				<view class="line">用户ID：{{data.userId}}</view>
				<view class="line">用户姓名：{{data.userName}}</view>
				<view class="line">用户手机号：{{data.userPhone}}</view>
				<view class="line">支付账号组：{{data.accountGroupName}}</view>
				<view class="line">提现金额：<text class="fc-orange">￥{{data.moneyStr}}</text></view>
				<view class="line">服务费：{{data.profitProportion}}%</view>
				<view class="line">实际提现：<text class="fc-orange">￥{{data.receiptMoneyStr}}</text></view>
				<view class="line">创建时间：{{data.createDate}}</view>
				<view class="btn two" v-if="data.state == 3">{{data.stateName}}</view>
				<view class="btn one" v-else>{{data.stateName}}</view>
			</view>
			<!-- 支付信息 -->
			<view class="mod">
				<view class="tit">支付信息</view>
				<view class="con">
					<view class="line">
						<view class="key">支付方式</view>
						<view class="value">{{data.payTypeName}}</view>
					</view>
					<view class="line">
						<view class="key">收款方式</view>
						<view class="value">{{data.receivingTypeName}}</view>
					</view>
					<view class="line" v-if="data.receivingQrcode">
						<view class="key">收款二维码</view>
					</view>
					<image :src="data.receivingQrcode" mode="aspectFill" style="height:600px;"
						@error="bindImgError('receivingQrcode')"></image>
				</view>
			</view>
			<view class="mod">
				<view class="tit">处理信息</view>
				<view class="con">
					<view class="line">
						<view class="key">处理方式</view>
						<view class="value">{{data.handleTypeName}}</view>
					</view>
					<view class="line">
						<view class="key">操作人</view>
						<view class="value">{{data.operator}}</view>
					</view>
					<view class="line">
						<view class="key">操作时间</view>
						<view class="value">{{data.handleDate}}</view>
					</view>
					<view class="line" v-if="data.rejectNote">
						<view class="key">驳回理由</view>
						<view class="value fc-orange">{{data.rejectNote}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 交互框 -->
		<view class="cu-modal modal" :class="(modalName=='rejec'||modalName=='finish')?'show':''">
		  <view class="cu-dialog bg-white">
			  <view class="head">提现处理</view>
			  <view class="content">
				<view v-if="modalName=='finish'">
					<radio-group @change="radioChange" class="radio-container">
					  <label v-for="(item, index) in items" :key="index">
						<radio :value="item.value" :checked="item.checked" />{{ item.name }}
					  </label>
					</radio-group>
				</view>
				<view v-if="modalName == 'rejec'"><input type="text" placeholder="驳回原因" v-model="Note"></view>
			  </view>
			  <view class="footer">
			  	<view @click="modalName=null">取消</view>
				<view class="confirm" v-if="modalName=='rejec'" @click="btnRejec">驳回</view>
				<view class="confirm" v-else @click="btnFinish">完成</view>
			  </view>
		  </view>
		</view>
		
		<view style="height: 120rpx;"></view>
		<view class="footBar" v-if="data.state == 1">
			<view class="button" @click="modalName = 'rejec'">驳回</view>
			<view class="button light" @click="modalName = 'finish'">完成</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tradeNo:null,
				Money:0,
				Note:'',
				//通用
				data:{},
				modalName:null,
				items: ['人工线上处理', '线下转账'], // 定义选项数组
				selectedItem: '人工线上处理' ,// 初始显示文本
				selectedIndex:1,
				items: [
					{ name: '人工线上处理', value: '2',checked:true},
					{ name: '线下转账', value: '3',checked:false }
				],
				selectedValue: '' // 存储选中的值
			}
		},
		onLoad(option) {
			this.tradeNo = option.tradeNo;
		},
		onShow() {
			this._loadOrderInfo();
		},
		methods: {
			_loadOrderInfo:function(){
				if(this.tradeNo){
					const _self = this;
					const api = this.$request;
					api.post(api.url.teamUserTransferMoneyOrerInfo,{
						tradeNo:this.tradeNo
					},(res)=>{
						if(res.code==200){
							_self.data = res.body;
						}
					})
				}
			},
			bindImgError:function(type,index){
				if(type == 'receivingQrcode'){
					this.data.receivingQrcode = '/static/logo.jpg';
				}
			},
			radioChange(e) {
			  this.selectedValue = e.detail.value; // 获取选中的值
			},
			//驳回请求
			btnRejec(){
				const api = this.$request;
				const self = this;
				this.modalName = null;
				api.post(api.url.teamUserTransferMoneyOrerRejec,{
					tradeNo:self.data.tradeNo,
					operateNote:self.Note
				},(res)=>{
					console.log(res)
					if(res.code==200){
						setTimeout(function(){
							uni.showToast({
								title:'驳回提现成功',
								icon:'success'
							})
							self._loadOrderInfo();
						},1000)
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			//完成订单
			btnFinish(){
				const api = this.$request;
				const self = this;
				this.modalName = null;
				api.post(api.url.cdbOrderFinish,{
					tradeNo:self.data.tradeNo,
					handleType:self.selectedValue
				},(res)=>{
					console.log(res)
					if(res.code==200){
						setTimeout(function(){
							uni.showToast({
								title:'完成订单成功',
								icon:'success'
							})
							self._loadOrderInfo();
						},1000)
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.fc-orange{font-weight: 600;color: #e85b36;}
	.page-head{height:60rpx;text-align:center;background: #fff;padding-top:20rpx;}
	.orderDetail {
		.info {
			position: relative;
			background: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			font-size: 30rpx;
			color: #2F2F2F;
			padding:30rpx;
			.line {line-height: 68rpx;}
			.btn {
				position: absolute;
				top: 40rpx;
				right: 40rpx;
				width: 130rpx;
				height: 46rpx;
				line-height: 46rpx;
				text-align: center;
				border-radius: 23rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
			.btn.one{
				background: #f56c6c;
			}
			.btn.two{
				background: #28713E;
			}
		}
		.tables{
			background-color: white;
			border-radius: 10rpx;
			.title{
				padding-top:20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.icon{
					color: #fc8452;
					font-weight: 600;
				}
			}
		}
		.mod {
			background: #fff;
			margin-bottom: 20rpx;
			padding: 20rpx 40rpx;
			.tit {
				font-size: 30rpx;
				// font-weight: 600;
				padding-bottom: 10rpx;
				margin-bottom: 20rpx;
				border-bottom: 1rpx solid #eee;
			}
			.line {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				line-height: 68rpx;
				.icon{
					font-weight: 600;
				}
			}
			.key {font-weight: Medium;}
			.log {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin: 0;
			}
			.ico-arrow {
				width: 18rpx;
				height: 30rpx;
			}
		}
	}
	.modal{
		.head{
			margin: 40rpx 0 60rpx;
			font-size: 30rpx;
			font-weight: 600;
		}
		.content{
			&>view{
				text-align: left;
				margin:30rpx;
				.radio-container {
				  display: flex;
				  justify-content: space-around; /* 或者使用 space-between 根据需要 */
				}
				input{
					width: 100%;
					height: 80rpx;
					text-align: left;
					font-size: 30rpx;
					border-bottom: 1rpx solid #e0e0e0;
				}
			}
		}
		.footer{
			display: flex;
			justify-content: center;
			align-items: center;
			&>view{
				width: 50%;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #fff;
				color: #eca768;
				border-top: 1rpx solid #e0e0e0;
			}
			.confirm{
				background:linear-gradient(90deg,#eca768,#e85b36);
				color: #ffffff;
			}
		}
	}
	.footBar{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding:20rpx 20rpx 40rpx;
		background-color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 0 10rpx #e0e0e0;
		.button{
			color: white;
			background:linear-gradient(90deg,#eca768,#e85b36);
			width: 240rpx;
			height: 68rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 10rpx;
			border-radius: 10rpx;
			&.light{
				background:linear-gradient(270deg,#327662,#28713E);
			}
		}
	}
</style>